<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-input v-model="seachForm.orderCode" placeholder="订单号" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-input v-model="seachForm.tiusernametle" placeholder="用户名" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-select v-model="seachForm.sourceType" placeholder="订单来源" clearable size="mini">
                    <el-option label="门店" :value="0"></el-option>
                    <el-option label="app" :value="1"></el-option>
                </el-select>
                <el-select v-model="seachForm.status" placeholder="订单状态" clearable size="mini">
                    <el-option label="待付款" :value="0"></el-option>
                    <el-option label="待发货" :value="1"></el-option>
                    <el-option label="待收货" :value="2"></el-option>
                    <el-option label="待评价" :value="3"></el-option>
                    <el-option label="交易成功" :value="4"></el-option>
                    <el-option label="交易关闭" :value="4"></el-option>
                </el-select>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
            <div class="btnList">
                <el-button size="mini" @click="showExport">{{$t('export')}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-table style="width: 100%" :data="orderTab" stripe v-adaptive="{bottomOffset: 85}" height="100" row-key="id" @selection-change="handleSelectionChange" @select-all="handleSelectionChange">
                <el-table-column prop="orderCode" label="订单号">
                </el-table-column>
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="orderAddr" label="收货地址">
                </el-table-column>
                <el-table-column prop="orderTel" label="收货电话">
                </el-table-column>
                <el-table-column prop="total" label="总数量">
                </el-table-column>
                <el-table-column prop="name" label="总价">
                </el-table-column>
                <el-table-column prop="sourceName" label="订单来源">
                </el-table-column>
                <el-table-column prop="statusName" label="订单状态">
                </el-table-column>
                <el-table-column prop="createTime" label="时间">
                </el-table-column>
                <el-table-column prop="address" width="90" :label="$t('details')" fixed="right">
                    <template v-slot="scope">
                        <el-button size="mini" @click="showDetails(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :pager-count="11"
                :current-page.sync="seachForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="seachForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 导出 -->
        <el-dialog :title="$t('export')" :visible.sync="exportDialogVisible" width="420px" class="smallDlog">
            <span>{{$t('whetoexptabdata')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exportDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="exportData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
        <!-- 详情 -->
        <el-dialog title="订单信息表" :visible.sync="viewDialogVisible" width="1200px" class="addNFRobeDlog" :close-on-click-modal="false" @close="viewDlogClose()">
            <div class="ltable">
                <div class="ltable-row">
                    <div class="ltable-col">订单号</div>
                    <div class="ltable-value">{{detailsDataForm.orderCode}}</div>
                    <div class="ltable-col">收货地址</div>
                    <div class="ltable-value">{{detailsDataForm.orderAddr}}</div>
                    <div class="ltable-col">总数量</div>
                    <div class="ltable-value">{{detailsDataForm.total}}</div>
                    <div class="ltable-col">订单来源</div>
                    <div class="ltable-value">{{detailsDataForm.sourceName}}</div>
                </div>
                <div class="ltable-row">
                    <div class="ltable-col">用户名</div>
                    <div class="ltable-value">{{detailsDataForm.username}}</div>
                    <div class="ltable-col">收货电话</div>
                    <div class="ltable-value">{{detailsDataForm.orderTel}}</div>
                    <div class="ltable-col">总价</div>
                    <div class="ltable-value">{{detailsDataForm.totalSum}}</div>
                    <div class="ltable-col">订单状态</div>
                    <div class="ltable-value">{{detailsDataForm.status}}</div>
                </div>
                <div class="ltable-row">
                    <div class="ltable-col-sec">用户ID</div>
                    <div class="ltable-value-sec">{{detailsDataForm.userId}}</div>
                    <div class="ltable-col-sec">取货方式</div>
                    <div class="ltable-value-sec">
                        <el-select v-model="detailsDataForm.status" placeholder="订单状态" clearable size="mini">
                            <el-option label="待付款" :value="0"></el-option>
                            <el-option label="待发货" :value="1"></el-option>
                            <el-option label="待收货" :value="2"></el-option>
                            <el-option label="待评价" :value="3"></el-option>
                            <el-option label="交易成功" :value="4"></el-option>
                            <el-option label="交易关闭" :value="4"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="order-product-list">
                <div class="order-product-item" v-for="item in detailsDataForm.productTab" :key="item.uuid">
                    <div class="item-col-list">
                        <div class="item-col">编码</div>
                        <div class="item-col">款号</div>
                        <div class="item-col">颜色</div>
                        <div class="item-col">标题</div>
                        <div class="item-col">尺寸</div>
                        <div class="item-col">数量</div>
                        <div class="item-col">单价</div>
                        <div class="item-col">总价</div>
                    </div>
                    <div class="item-val-list">
                        <div class="item-val">{{item.bomCode}}</div>
                        <div class="item-val">{{item.itemCode}}</div>
                        <div class="item-val">{{item.colour}}</div>
                        <div class="item-val">{{item.title}}</div>
                        <div class="item-val">{{item.size}}</div>
                        <div class="item-val">{{item.qty}}</div>
                        <div class="item-val">{{item.price}}</div>
                        <div class="item-val">{{item.price}}</div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewDialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="updateOrderState">订单状态切换</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getOrderList,
    exportOrderList,
    getOrderDetail,
    updateOrderStatus
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            total: 0,
            seachForm: {
                orderCode: '',
                username: '',
                sourceType: '',
                status: '',
                pageSize: 10,
                pageNo: 1
            },
            type: '',
            orderTab: [],
            selTabData: [],
            exportDialogVisible: false,
            exportForm: {
                orderCode: '',
                sourceType: '',
                status: '',
                username: ''
            },
            viewDialogVisible: false,
            currentOperId: '',
            detailsDataForm: {
                orderCode: '',
                orderAddr: '',
                total: '',
                sourceName: '',
                username: '',
                orderTel: '',
                totalSum: '',
                status: '',
                userId: '',
                pickType: '',
                productTab: []
            },
            updateOrderForm: {
                orderIds: [],
                status: ''
            }
        }
    },
    methods: {
        seachData () {
            getOrderList(JSON.stringify(this.seachForm)).then(res => {
                if (res.data.code == 0) {
                    this.orderTab = res.data.data.data
                    this.total = res.data.data.hits
                }
            })
        },
        getData () {
            this.seachForm.pageNo = 1
            this.seachData()
        },
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.seachData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.seachData()
        },
        handleSelectionChange (select) {
            this.selTabData = select
        },
        showExport() {
            this.exportForm.orderCode = this.seachForm.orderCode
            this.exportForm.sourceType = this.seachForm.sourceType
            this.exportForm.status = this.seachForm.status
            this.exportForm.username = this.seachForm.username
            this.exportDialogVisible = true
        },
        exportData () {
            exportOrderList(JSON.stringify(this.exportForm)).then(res => {
                if (res.status == 200) {
                    let date = new Date()
                    let name =  "成品订单列表" + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + ".xlsx"
                    let blob = new Blob([res.data], {type: 'application/vnd.ms-excel;charset=utf-8'})
                    let url = window.URL.createObjectURL(blob);
                    let aLink = document.createElement("a");
                    aLink.style.display = 'none';
                    aLink.href = url
                    aLink.setAttribute('download', name);
                    document.body.appendChild(aLink);
                    aLink.click();
                    document.body.removeChild(aLink); //下载完成移除元素
                    window.URL.revokeObjectURL(url); //释放掉blob对象
                    this.exportDialogVisible = false
                    this.$message.success('导出成功')
                }
            })
        },
        showDetails(item) {
            this.detailsDataForm.orderCode = item.orderCode
            this.detailsDataForm.orderAddr = item.orderAddr
            this.detailsDataForm.total = item.total
            this.detailsDataForm.sourceName = item.sourceName
            this.detailsDataForm.username = item.username
            this.detailsDataForm.orderTel = item.orderTel
            this.detailsDataForm.status = item.status
            this.detailsDataForm.userId = item.userId
            this.detailsDataForm.pickType = item.pickType
            this.detailsDataForm.totalSum = item.actualPrice
            this.getDetails(item.id)
            this.viewDialogVisible = true
        },
        viewDlogClose() {
            this.detailsDataForm.orderCode = ''
            this.detailsDataForm.orderAddr = ''
            this.detailsDataForm.total = ''
            this.detailsDataForm.sourceName = ''
            this.detailsDataForm.username = ''
            this.detailsDataForm.orderTel = ''
            this.detailsDataForm.status = ''
            this.detailsDataForm.userId = ''
            this.detailsDataForm.pickType = ''
            this.detailsDataForm.status = ''
            this.detailsDataForm.orderIds = []
            this.currentOperId = ''
        },
        getDetails (id) {
            getOrderDetail(JSON.stringify({ orderId: id })).then(res => {
                if (res.data.code == 0) {
                    this.currentOperId = id
                    this.detailsDataForm.productTab = res.data.data
                }
            })
        },
        updateOrderState() {
            this.updateOrderForm.status = this.detailsDataForm.status
            this.updateOrderForm.orderIds.push(this.currentOperId)
            updateOrderStatus(JSON.stringify(this.updateOrderForm)).then(res => {
                if (res.data.code == 0) {
                    this.$message.success('订单状态更新成功!')
                    this.viewDialogVisible = false
                    this.seachData()
                }
            })
        }

    },
    mounted() {
        this.seachData()
    }
}
</script>

<style lang="less" scoped>
@import './order.less';
</style>
